<template>
  <transition name="bx-notification-fade">
    <div 
      v-if="visible"
      :class="[
        'bx-notification',
        'bx-glass',
        `bx-notification--${type}`,
        {
          'bx-notification--closable': closable
        }
      ]"
      :style="{
        top: `${offset}px`,
        [placement === 'top-left' || placement === 'bottom-left' ? 'left' : 'right']: '20px'
      }"
      @mouseenter="clearTimer"
      @mouseleave="startTimer"
    >
      <BxIcon :name="iconName" class="bx-notification__icon" />
      <div class="bx-notification__content">
        <div v-if="title || $slots.title" class="bx-notification__title">
          <slot name="title">{{ title }}</slot>
        </div>
        <div class="bx-notification__description">
          <slot>{{ description }}</slot>
        </div>
        <div v-if="$slots.footer" class="bx-notification__footer">
          <slot name="footer"></slot>
        </div>
      </div>
      <BxIcon 
        v-if="closable"
        name="x"
        class="bx-notification__close-btn"
        @click="close"
      />
    </div>
  </transition>
</template>

<script>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import BxButton from "../basic/BxButton.vue"
import BxIcon from "../basic/BxIcon.vue"

export default {
  name: 'BxNotification',
  components: {
    BxIcon
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info',
      validator: (value) => ['info', 'success', 'warning', 'error'].includes(value)
    },
    duration: {
      type: Number,
      default: 4500
    },
    closable: {
      type: Boolean,
      default: true
    },
    offset: {
      type: Number,
      default: 20
    },
    placement: {
      type: String,
      default: 'top-right',
      validator: (value) => ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(value)
    },
    id: {
      type: String,
      default: ''
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const visible = ref(false)
    let timer = null

    const iconName = computed(() => {
      switch (props.type) {
        case 'success': return 'check-circle'
        case 'warning': return 'alert-triangle'
        case 'error': return 'x-circle'
        case 'info':
        default: return 'info'
      }
    })

    const startTimer = () => {
      if (props.duration > 0) {
        timer = setTimeout(() => {
          close()
        }, props.duration)
      }
    }

    const clearTimer = () => {
      clearTimeout(timer)
      timer = null
    }

    const close = () => {
      visible.value = false
      emit('close', props.id)
    }

    onMounted(() => {
      visible.value = true
      startTimer()
    })

    onUnmounted(() => {
      clearTimer()
    })

    return {
      visible,
      iconName,
      close,
      clearTimer,
      startTimer
    }
  }
}
</script>

<style scoped>
.bx-notification {
  position: fixed;
  width: 330px;
  padding: 14px 24px;
  border-radius: var(--bx-radius-medium);
  display: flex;
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

.bx-notification--info {
  background: rgba(0, 122, 255, 0.2);
  border: 1px solid rgba(0, 122, 255, 0.3);
}

.bx-notification--success {
  background: rgba(0, 180, 0, 0.2);
  border: 1px solid rgba(0, 180, 0, 0.3);
}

.bx-notification--warning {
  background: rgba(255, 165, 0, 0.2);
  border: 1px solid rgba(255, 165, 0, 0.3);
}

.bx-notification--error {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.bx-notification__icon {
  font-size: 24px;
  margin-right: 16px;
  align-self: flex-start;
}

.bx-notification--info .bx-notification__icon { color: rgba(0, 122, 255, 0.8); }
.bx-notification--success .bx-notification__icon { color: rgba(0, 180, 0, 0.8); }
.bx-notification--warning .bx-notification__icon { color: rgba(255, 165, 0, 0.8); }
.bx-notification--error .bx-notification__icon { color: rgba(255, 0, 0, 0.8); }

.bx-notification__content {
  flex: 1;
}

.bx-notification__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bx-notification__description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bx-text-secondary);
}

.bx-notification__footer {
  margin-top: 8px;
  font-size: 13px;
  text-align: right;
}

.bx-notification__close-btn {
  font-size: 14px;
  color: var(--bx-text-tertiary);
  margin-left: 16px;
  cursor: pointer;
  align-self: flex-start;
}

.bx-notification__close-btn:hover {
  color: var(--bx-text-primary);
}

/* Transition */
.bx-notification-fade-enter-active,
.bx-notification-fade-leave-active {
  transition: all 0.3s ease;
}

.bx-notification-fade-enter-from,
.bx-notification-fade-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.bx-notification-fade-enter-from[style*="left"],
.bx-notification-fade-leave-to[style*="left"] {
  transform: translateX(-100%);
}
</style>

